<template>
  <div>
    <div class="flex items-center">
      <p class="node-sub-text mr-2">{{title}}</p>

      <span class="text-[#060709cc] text-[12px]">{{type === 'option' ? '选项' : '直接'}}回答</span>
    </div>

    <ul v-if="type === 'option'">
      <li v-for="(item,index) in valueList" :key="index" class="typeof-list pl-12 text-[12px] mt-2">
        <div class="typeof-item">{{item.sort}}</div>
        <Tooltip theme="light" transfer :content="item.content" placement="top" :disabled="!item.content">
          <div class="ans-row" :style="{color: !item.content && '#999'}">{{item.content || '未配置内容'}}</div>
        </Tooltip>
        <Handle
          :id="'source-' + index"
          type="source"
          :position="Position.Right"
          style="top: auto; translate: 50% 0%"
        />
      </li>

      <li class="typeof-list pl-12 text-[12px] mt-2">
        <div class="typeof-item">其他</div>
        <div>用户不可见</div>
        <Handle
          :id="'source-' + 88"
          type="source"
          :position="Position.Right"
          style="top: auto; translate: 50% 0%"
        />
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { Handle, Position, useNode } from '@vue-flow/core';

const props = defineProps({
  valueList: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: '输入'
  },
  valueName: {
    type: String,
    default: 'value'
  },
  type: Number
})

const typeofRef = ref(null)
const showMore = ref(false)
const changeShowMore = () => {
  showMore.value = typeofRef.value?.offsetWidth >= 260
}
const getLetter = () => {
  let arr = []
  for(let i = 0; i < 26; i++) {
    arr.push(String.fromCharCode(65 + i))
  }
  return arr
}
const letterList = getLetter()

watch(
  props.valueList,
  newVlue => {
    if (newVlue) {
      changeShowMore()
    }
  },
  { deep: true, flush: 'post' }
)
</script>

<style scoped lang="scss">
.typeof-list {
  display: flex;
  align-items: center;
  .ivu-tooltip{
    line-height: 1;
  }
  .typeof-item {
    width: 50px;
    min-width: 50px;
    text-align: center;
  }
  .ans-row {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 180px;
  }
}
</style>
